<template>
  <div class="profile-view">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :size="80" :src="user.avatar" />
        <div class="profile-info">
          <h3>{{ user.username }}</h3>
          <p>{{ user.email }}</p>
        </div>
      </div>
      <div class="profile-details">
        <el-descriptions title="个人信息" :column="1" border>
          <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
          <el-descriptions-item label="个人简介">{{ user.bio }}</el-descriptions-item>
          <el-descriptions-item label="注册时间">{{ user.registerDate }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const user = ref({
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  username: 'John Doe',
  email: 'john.doe@example.com',
  bio: '这是一个个人简介，用于展示用户的个人信息。',
  registerDate: '2023-01-01'
})
</script>

<style scoped>
.profile-view {
  padding: 20px;
}

.profile-card {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-info {
  margin-left: 20px;
}

.profile-info h3 {
  margin: 0;
  font-size: 24px;
}

.profile-info p {
  margin: 0;
  color: #999;
}

.profile-details {
  margin-top: 20px;
}
</style>